<template>
    <ModalPage
        :show="show"
        title="文件导入"
        :desc="title"
        hideFooter
        @close="onClose"
        :isLoading="loading"
    >
        <n-upload
            directory-dnd
            :headers="fileHeaders"
            :action="props.uploadUrl"
            @finish="onFinish"
            @before-upload="beforeUpload"
            :show-file-list="false"
        >
            <n-upload-dragger>
                <div class="upload-icon">
                    <i class="iconfont icon-upload"></i>
                </div>
                <div class="tt0-text">点击或者拖动文件到该区域来上传</div>
            </n-upload-dragger>
        </n-upload>
        <div class="down">
            <span>下载模板</span>
        </div>
    </ModalPage>
</template>
<script setup>
import { ref, computed } from "vue";
import ModalPage from "@/common/ModalPage/index.vue";

const props = defineProps({
    show: {
        type: Boolean,
        default: () => false,
    },
    title: {
        type: String,
        default: () => "",
    },
    uploadUrl: {
        type: String,
        default: () => "",
    },
});

const fileHeaders = computed(() => {
    // const token = localStorage.getItem("Token");
    const token = "0FA7WB2KP3R317519OBPM05";
    return {
        Authorization: `Basic ${token}`,
    };
});

const emits = defineEmits(["close", "success"]);

const loading = ref(false);

const onClose = () => {
    emits("close");
};

const beforeUpload = () => {
    loading.value = true;
};

const onFinish = ({ event }) => {
    loading.value = false;
    const { response } = event.currentTarget;
    const res = JSON.parse(response);
    if (res.code === 200) {
        window.$message.success("导入成功", {
            duraction: 1500,
        });
        emits("success");
    } else {
        window.$message.error(res.msg || "上传失败", {
            duraction: 1500,
        });
    }
};
</script>
<style lang="less" scoped>
.upload-icon {
    i {
        font-size: 36px;
        line-height: 36px;
        color: var(--primary-color);
    }
}
.tt0-text {
    margin-top: 4px;
    font-size: 14px;
    color: #666;
}
.tt0-desc {
    margin-top: 4px;
    font-size: 12px;
    color: #999;
}
.down {
    margin-top: 12px;
    span {
        color: var(--primary-color);
        cursor: pointer;
        &:hover {
            text-decoration: underline;
        }
    }
}
</style>
